/*
 * 可复用的公有布局
 */

// flex布局
.df {
  display: flex;
}

.fd-column {
  flex-direction: column;
}

.jcenter {
  justify-content: center;
}

.acenter {
  align-items: center;
}

.flex {
  flex: 1;
}

// 定位
.abs {
  position: absolute;
}

.rel {
  position: relative;
}




// 公共样式  login
// html
html {
  height: 100%;

  // body
  body {
    display: flex;
    height: 100%;
    flex-direction: column;
  }
}

// 登录界面
#login {
  width: 100%;
  height: 667px;
  background: url(../../assets/imgs/背景2.jpg);
  background-size: cover;

  form {
    width: 100%;
    padding: 0 5% 0;

    p {
      width: 100%;
    }

    input {
      width: 100%;
      height: 45px;
      line-height: 45px;
      background-color: rgba(255, 255, 255, .5);
      border-radius: 25px;
      border: rgba(255, 255, 255, .5);
      // margin-left: 28px;
      font-size: 16px;
      text-indent: 24px;

    }

    input:nth-child(1) {
      position: relative;
    }

    select {
      position: absolute;
      background-color: rgba(255, 255, 255, -0.5);
      border: rgba(255, 255, 255, .5);
      color: #fff;
      left: 43px;
      top: 162px;
    }

    #verification {
      display: flex;
      width: 60vw;
      height: 45px;
      background-color: rgba(255, 255, 255, .5);
      margin-right: 19px;

    }

    #captcha1 {
      //    background-color: red;
      width: 40vw;
      height: 45px;
      justify-content: space-between;
      margin-top: 20px;

    }

    input::placeholder {
      color: #ccc;
      font-size: 14px;
    }

    button {
      width: 100%;
      height: 43px;
      line-height: 43px;
      border-radius: 25px;
      // margin-left: 28px;
      background-color: rgba(86, 220, 126, .5);
      border: rgba(86, 220, 126, .5);
    }

  }

  ul {
    display: flex;
    justify-content: space-around;

    li {
      margin-left: px;
      margin-top: 20px;
    }

    .icon-weixin {
      // display: flex;
      // flex-direction: column-reverse;
      font-size: 20px;
    }

  }
}


// 首页公共样式
// 页脚
footer {
  display: flex;
  height: 60px;
  box-shadow: 0px 0px 10px #ccc;

  ul {
    width: 350px;
    height: 45px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;

    a {
      display: flex;
      flex-direction: column;
      color: #8a8a8a;
      padding: 10px 0;

      p {
        font-size: 12px;
        margin-top: 3px;
        text-align: center;
        margin-bottom: 5px;
      }

      .iconfont {
        font-size: 28px;
       margin-bottom: 1px; 
        margin-top: -5px;
      }

    }

    .active {
      color: #4294ff;
    }

  }
}